<template>
  <ButtonGroup size="small">
      <!-- 水平对齐 -->
      <Button v-show="notMultiple()" @click="left"><img src="../assets/icons/left.png" width="14" height="14"/></Button>
      <Button v-show="notMultiple()" @click="xcenter"><img src="../assets/icons/xcenter.png" width="14" height="14"/></Button>
      <Button v-show="notMultiple()" @click="right"><img src="../assets/icons/right.png" width="14" height="14"/></Button>
      <!-- 垂直对齐 -->
      <Button v-show="notMultiple()" @click="top"><img src="../assets/icons/top.png" width="14" height="14"/></Button>
      <Button v-show="notMultiple()" @click="ycenter"><img src="../assets/icons/ycentr.png" width="14" height="14"/></Button>
      <Button v-show="notMultiple()" @click="bottom"><img src="../assets/icons/bottom.png" width="14" height="14"/></Button>
      <!-- 平均对齐 -->
      <Button v-show="notMultiple()" @click="xequation"><img src="../assets/icons/xequation.png" width="14" height="14"/></Button>
      <Button v-show="notMultiple()" @click="yequation"><img src="../assets/icons/yequation.png" width="14" height="14"/></Button>
  </ButtonGroup>
</template>

<script>
import select from '@/mixins/select'

export default {
  name: 'ToolBar',
  mixins: [select],
  data() {
    return {
      id:'',
      list: []
    };
  },
  methods:{
    // 非多选时，禁止组合对齐操作
    notMultiple(){
      return this.mSelectMode == 'multiple'
    },
    // 左对齐
    left(){
      const activeObject = this.canvas.c.getActiveObject();
      if (activeObject && activeObject.type === 'activeSelection') {
          const activeSelection = activeObject;
          const activeObjectLeft = -(activeObject.width / 2);
          activeSelection.forEachObject(item => {
            item.set({
                  left: activeObjectLeft,
              });
              item.setCoords();
              this.canvas.c.renderAll();
          });
      }
    },
    // 右对齐
    right(){
      const activeObject = this.canvas.c.getActiveObject();
      if (activeObject && activeObject.type === 'activeSelection') {
            const activeSelection = activeObject;
            const activeObjectLeft = (activeObject.width / 2);
            activeSelection.forEachObject(item => {
              item.set({
                    left: activeObjectLeft - (item.width * item.scaleX),
                });
                item.setCoords();
                this.canvas.c.renderAll();
            });
        }
    },
    // 水平居中对齐
    xcenter(){
      const activeObject = this.canvas.c.getActiveObject();
      if (activeObject && activeObject.type === 'activeSelection') {
            const activeSelection = activeObject;
            activeSelection.forEachObject(item => {
                item.set({
                    left: 0 - ((item.width * item.scaleX) / 2),
                });
                item.setCoords();
                this.canvas.c.renderAll();
            });
        }
    },
    // 垂直居中对齐
    ycenter(){
      const activeObject = this.canvas.c.getActiveObject();
      if (activeObject && activeObject.type === 'activeSelection') {
            const activeSelection = activeObject;
            activeSelection.forEachObject(item => {
                item.set({
                    top: 0 - ((item.height * item.scaleY) / 2),
                });
                item.setCoords();
                this.canvas.c.renderAll();
            });
        }
    },
    // 顶部对齐
    top(){
      const activeObject = this.canvas.c.getActiveObject();
      if (activeObject && activeObject.type === 'activeSelection') {
            const activeSelection = activeObject;
            console.log(activeSelection)
            const activeObjectTop = -(activeObject.height / 2);
            activeSelection.forEachObject(item => {
              item.set({
                    top: activeObjectTop,
                });
                item.setCoords();
                this.canvas.c.renderAll();
            });
        }
    },
    // 底部对齐
    bottom(){
      const activeObject = this.canvas.c.getActiveObject();
      if (activeObject && activeObject.type === 'activeSelection') {
            const activeSelection = activeObject;
            const activeObjectTop = (activeObject.height / 2);
            activeSelection.forEachObject(item => {
              item.set({
                    top: activeObjectTop - (item.height * item.scaleY),
                });
                item.setCoords();
                this.canvas.c.renderAll();
            });
        }
    },
    // 水平平均对齐
    xequation(){
        const activeObject = this.canvas.c.getActiveObject();
        if (activeObject && activeObject.type === 'activeSelection') {
          const activeSelection = activeObject;
          activeSelection._objects.sort((a, b) => {
            return a.left - b.left;
          })
          // 平均间距计算
          const itemSpac = spacWidth()
          // 组原点高度
          const yHeight = (activeObject.width/2)
          activeObject.forEachObject((item, i) => {
            // 获取当前元素之前所有元素的高度
            const preHeight = getItemLeft(i)
            const top = itemSpac * i + preHeight - yHeight
            item.set('left', top)
          })
          this.canvas.c.renderAll();
        }
        // 获取平均间距
        function spacWidth(){
          let count = getAllItemHeight()
          const allSpac = activeObject.width - count
          return allSpac / (activeObject._objects.length - 1)
        }
        // 获取所有元素高度
        function getAllItemHeight(){
          let count = 0;
          activeObject.forEachObject(item => { 
            count += getItemWidth(item)
          })
          return count
        }
        function getItemWidth(item){
          return item.aCoords.tr.x - item.aCoords.tl.x
        }
        // 获取当前元素之前所有元素的高度
        function getItemLeft(i){
          if (i === 0) return 0
          let width = 0
          for (let index = 0; index < i; index++) {
            width += getItemWidth(activeObject._objects[index])
          }
          return width
        }
    },
    // 垂直平均对齐
    yequation(){
      const activeObject = this.canvas.c.getActiveObject();
      if (activeObject && activeObject.type === 'activeSelection') {
        const activeSelection = activeObject;
        activeSelection._objects.sort((a, b) => {
          return a.top - b.top;
        })
        // 平均间距计算
        const itemSpac = spacHeight()
        // 组原点高度
        const yHeight = (activeObject.height/2)
        activeObject.forEachObject((item, i) => {
          // 获取当前元素之前所有元素的高度
          const preHeight = getItemTop(i)
          const top = itemSpac * i + preHeight - yHeight
          item.set('top', top)
        })
        this.canvas.c.renderAll();
      }
      // 获取平均间距
      function spacHeight(){
        let count = getAllItemHeight()
        const allSpac = activeObject.height - count
        return allSpac / (activeObject._objects.length - 1)
      }
      // 获取所有元素高度
      function getAllItemHeight(){
        let count = 0;
        activeObject.forEachObject(item => { 
          count += getItemHeight(item)
        })
        return count
      }
      function getItemHeight(item){
        return item.aCoords.bl.y - item.aCoords.tl.y
      }
      // 获取当前元素之前所有元素的高度
      function getItemTop(i){
        if (i === 0) return 0
        let height = 0
        for (let index = 0; index < i; index++) {
          height += getItemHeight(activeObject._objects[index])
        }
        return height
      }
    }
  }
};
</script>

<style scoped lang="less">
/deep/ .ivu-btn[disabled]{
  img{ opacity: 0.2;}
}
</style>
